<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><!-- 会导致 fixed 失效
	<meta name="viewport" content="user-scalable=no,target-densitydpi=240,width=480"/> -->
	<meta name="viewport" content="user-scalable=no"/>
	<title>所有组件</title>
	<link rel="stylesheet" href="../common/jquery.mobile-1.1.0.min.css" /> 
	<link rel="stylesheet" href="../common/BingoTouch.css" />
	<script src="../common/iscroll.js"></script>
	<script src="../common/jquery-1.7.1.min.js"></script>
	<script src="../common/jquery.mobile-1.1.0.min.js"></script>
	<script src="../common/BingoTouch.js"></script>
	<link rel="stylesheet/less" type="text/css" href="../common/styles.less">
	<script src="../common/less-1.3.0.min.js"></script> 
</head>
<body>
<div data-role="page" class="container">
	<div class="header" fixed="top">
        <!-- align="left" align="right" 可以方便控制文本对齐方式，不写默认居中 -->
        <h1 class="title">BingoTouch</h1>
        <div class="header-left">
            <div class="btn-back" data-role="BTButton" data-url="home.html" url-arg="id">返回</div>
        </div>
        <div class="header-right">
            <div class="btn-primary" data-role="BTButton">
                <img src="statics/images/icon-refresh.png" alt=""/>
            </div>
        </div>
        <div class="toolbar">
            <div class="searchbar"><input type="text" value="" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
        </div>	
    </div>
   <div data-role="content">
		
		<div class="content">
			<div class="content-inner" style="padding-top:150px;">
				<h2>带图标导航栏,data-icon=""图标可以是样式名，也可以是路径</h2>	
				<!-- 导航条 -->
				<div class="navbar">
					<!-- 多1个按钮class=grid-d -->
					<ul class="grid-c">
						<li><div data-role="BTButton" class="btn-primary btn-active" data-icon="statics/images/icon-home.png" icon-dir="left" mouseup="false">首页</div>
						</li>
						<li><div data-role="BTButton" class="btn-primary" data-icon="statics/images/icon-list.png" icon-dir="left" mouseup="false">栏目</div></li>
						<li><div data-role="BTButton" class="btn-primary" data-icon="statics/images/icon-setting.png" icon-dir="left" mouseup="false">设置</div></li>
					</ul>
				</div>
				<!-- 导航在内容里面 -->
				<h2>没图标导航栏</h2>
				<div class="navbar">
					<ul class="grid-c">
						<li><div data-role="BTButton" class="btn-primary" mouseup="false">Button1Button1</div></li>
						<li><div data-role="BTButton" class="btn-primary btn-active" mouseup="false">Button2</div></li>
						<li><div data-role="BTButton" class="btn-primary" mouseup="false">Button3</div></li>
					</ul>
				</div>
				<h2>自适应内容型导航栏 -- table结构 </h2>
				<!-- 自适应型导航栏 -->
				<div class="navbar">
					<table>
						<tr>
							<td>
								<div data-role="BTButton" class="btn-primary btn-active" data-icon="icon-arrow-up" icon-dir="top" mouseup="false">Button1Button1</div>
							</td>
							<td>
								<div data-role="BTButton" class="btn-primary" data-icon="icon-arrow-down" icon-dir="bottom" mouseup="false">Button2</div>
							</td>
							<td>
								<div data-role="BTButton" class="btn-primary" data-icon="icon-arrow-left" icon-dir="left" mouseup="false">Button3</div>
							</td>
						</tr>
					</table>
				</div>
				<!-- 按钮群组 -->
				<h2>按钮群组 class=btn-group </h2>
				<div class="btn-group">
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-left" icon-dir="left">
						返回
					</div>
					<div class="btn-primary" data-role="BTButton">
						刷新
					</div>
					<div class="btn-primary" data-role="BTButton">
						<img src="statics/images/icon-refresh.png" alt=""/>
					</div>
				</div>
				data-role="BTSwitchs" 只激活一个
				<div class="btn-group" data-role="BTSwitchs">
					<div class="btn-primary btn-active" data-role="BTButton" mouseup="false">
						返回
					</div>
					<div class="btn-primary" data-role="BTButton" mouseup="false">
						刷新
					</div>
					<div class="btn-primary" data-role="BTButton" mouseup="false">
						<img src="statics/images/icon-refresh.png" alt=""/>
					</div>
				</div>
				<h2>所有按钮元素</h2>
				<div class="btn-control">
				<!-- 按钮元素 -->
					<div data-role="BTButton">普通按钮</div>
					<div data-role="BTButton" disabled="disabled">只读按钮</div>
					<div class="btn-inverse" data-role="BTButton">反转按钮</div>
					<div class="btn-primary btn-large" data-role="BTButton">主要按钮</div>
					<div class="btn-success btn-xlarge" data-role="BTButton">成功按钮</div>
					<div class="btn-danger btn-xxlarge" data-role="BTButton">危险按钮</div>
					<!-- 折叠菜单 -->
				</div>
				<h2>如果需要默认显示，就加个class=show BTButton的data-icon="icon-plus icon-minus"</h2>
				<div class="collapses">
					<!-- 这里的class=show就默认显示 -->
					<div class="collapse show">
						<div class="collapse-header">
							<div data-role="BTButton" data-icon="icon-plus" icon-dir="left">所有图标</div>
						</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</div>
					<div class="collapse">
						<div class="collapse-header">
							<div data-role="BTButton" data-icon="icon-plus" icon-dir="left">所有按钮</div>
						</div>
						<div class="collapse-content">
							<div data-role="BTButton">普通按钮</div>
							<div class="btn-primary" data-role="BTButton">主要按钮</div>
						</div>
					</div>
				</div>	
				<h2>列表折叠菜单 —— 1次只能显示1个内容</h2>
				<ul class="list-view list-collapse">
					<li><div data-role="BTButton" class="btn-active" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮1</div>
						<div class="collapse-content">
							
							<ul class="list-view">
								<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right"><img src="statics/images/icon01.png" alt=""/>列表按钮</div></li>
								<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" class="btn-active"><img src="statics/images/icon02.png" alt=""/>列表按钮</div></li>
								<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right"><img src="statics/images/icon03.png" alt=""/>列表按钮</div></li>
							</ul>	
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮2</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮3</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
				</ul>
				<!-- 列表菜单 -->
				<h2>列表菜单</h2>
				<ul class="list-view">
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" class="btn-active">列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
				</ul>			
				<!-- 列表菜单2 -->
				<h2>列表带图片菜单</h2>
				<ul class="list-view">
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right"><img src="statics/images/icon01.png" alt=""/>列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" class="btn-active"><img src="statics/images/icon02.png" alt=""/>列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right"><img src="statics/images/icon03.png" alt=""/>列表按钮</div></li>
				</ul>	
				<!-- 列表菜单3 -->
				<h2>多行带缩略图列表</h2>
				<ul class="list-view">
					<li>
						<div data-role="BTButton" data-icon="icon-download" icon-dir="right">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
						</div>
					</li>
					<li>
						<div data-role="BTButton" data-icon="icon-download" icon-dir="right" class="btn-active">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
						</div>
					</li>
					<li>
						<div data-role="BTButton" data-icon="icon-download" icon-dir="right">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
						</div>
					</li>
				</ul>
				<!-- 带标题的列表菜单 -->
				<h2>带标题的列表菜单</h2>
				<ul class="list-view list-view-head">				
					<li><div data-role="BTButton" mousedown="false">列表标题</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
					<li><div class="btn-active" data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
				</ul>
				<!-- 带标题的列表菜单 -->
				<h2>带标题的2列列表菜单-- mouseup=false 前2个点击弹出,保留了激活状态，第3个是点击跳转，不需要保留</h2>
				<ul class="list-view list-view-head">				
					<li><div data-role="BTButton" mousedown="false">2列列表菜单</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" mouseup="false">时间<label>2012年7月12日</label></div></li>
					<li><div class="btn-active" data-role="BTButton" data-icon="icon-list-right" icon-dir="right" mouseup="false">区域<label>广州市</label></span></div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">星级<label>一星</label></div></li>
					<li><div data-role="BTButton" mousedown="false">姓名姓名:<label><input type="text" value="" class="input-large"/></label></div></li>
					<li><div data-role="BTButton" mousedown="false">描述<label><textarea name="" id="" cols="30" rows="3"></textarea></label></div></li>
					<li><div data-role="BTButton">性别<label><div name="group5" data-role="BTRadio" class="BTCheck_ON" display="block">Radio</div></label></div></li>
					<li><div data-role="BTButton"><label><div name="group5" data-role="BTRadio" display="block">Radio2</div></label></div></li>
					<!-- Check1 点击文字选中 -->
					<li><div data-role="BTButton"><div data-role="BTCheck">点文字选中</div></div></li>
					<!-- Check2 点击整行有效 -->
					<li><div data-role="BTButton"><div data-role="BTCheck" display="block">点整行选中</div></div></li>
				</ul>
				<ul class="list-view list-view-head list-checkbox">				
					<li><div data-role="BTButton" mousedown="false">多选列表</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck BTCheck_ON" icon-dir="left">checkbox在左边</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck" icon-dir="right">checkbox在右边</div></li>
				</ul>
				<ul class="list-view list-view-head list-radio">				
					<li><div data-role="BTButton" mousedown="false">单选列表</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck BTCheck_ON" icon-dir="left">radio在左边</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck" icon-dir="right">radio在右边</div></li>
				</ul>
				<!-- web表单 -->
				<h2>web表单</h2>
				<form class="form">
					<div class="control-group">
						<label>输入框标题</label><input type="text" class="input-large"/>
					</div>
					<div class="control-group">
						<label>搜索栏</label><div class="searchbar"><input type="text" value="" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
					</div>
					<div class="control-group">
						<label>文本区</label><textarea class="input-large"></textarea>
					</div>
					<div class="control-group">
						<label>多选框</label><div data-role="BTCheck" class="BTCheck_ON">Check</div><div data-role="BTCheck" align="right">Check</div>
					</div>
					<div class="control-group">
						<label>下拉框</label><div id="BTSex" data-role="BTSelect" value="" selectedIndex="-1" data='{"title":"请选择性别","data":[{"text":"男性","value":0},{"text":"女性","value":1}]}'><span>请选择性别</span></div>
					</div>
					<div class="control-group">
						<label>单选框</label><div data-role="BTRadio" name="group">Radio</div><div data-role="BTRadio" align="right" name="group">Radio</div>
					</div>
					<div class="control-group">
						<label>切换按钮</label><div data-role="BTSwitch">OFF</div>
					</div>
					<div class="control-group">
						<label>日期框</label><div id="BTDate" onChange="alert(document.all('BTDate').value);" data-role="BTDate" value="" data='{"title":"请选择日期"}'><span>请选择日期</span></div>
				
					</div>
					<table>
						<tr>
							<td>
								<div class="btn-primary" data-role="BTButton">提交</div>
							</td>
							<td>
								<div data-role="BTButton">重置</div>
							</td>
						</tr>
					</table>
				</form>
				<!-- web表单2 -->
				<h2>web表单-控件宽度100%</h2>
				<form class="form-fluid">
					<div class="control-group">
						<label>输入框标题</label><input type="text" class="input-large"/>
					</div>
					<div class="control-group">
						<label>搜索栏</label><div class="searchbar"><input type="text" value="" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
					</div>
					<div class="control-group">
						<label>文本区</label><textarea class="input-large"></textarea>
					</div>
					<div class="control-group">
						<label>多选框</label><div data-role="BTCheck" class="BTCheck_ON">Checkbox</div>
					</div>
					<div class="control-group">
						<label>下拉框</label><div id="BTSex" data-role="BTSelect" value="" selectedIndex="-1" data='{"title":"请选择性别","data":[{"text":"男性","value":0},{"text":"女性","value":1}]}'><span>请选择性别</span></div>
					</div>
					<div class="control-group">
						<label>单选框</label><div data-role="BTRadio" name="group2">Radio</div><div data-role="BTRadio" name="group2">Radio</div>
					</div>
					<div class="control-group">
						<label>日期框</label><div id="BTDate" onChange="alert(document.all('BTDate').value);" data-role="BTDate" value="" data='{"title":"请选择日期"}'><span>请选择日期</span></div>
					</div>	
					<table>
						<tr>
							<td>
								<div class="btn-primary" data-role="BTButton">提交</div>
							</td>
							<td>
								<div data-role="BTButton">重置</div>
							</td>
						</tr>
					</table>				
				</form>
				<!-- web表单3 -->
				<h2>web表单-宽度100%-文本描述在里面的</h2>
				<form class="form-fluid">
					<div class="control-group">
						<input type="text" placeholder="输入框标题" class="input-large"/>
					</div>
					<div class="control-group">
						<div class="searchbar"><input type="text" placeholder="搜索栏" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
					</div>
					<div class="control-group">
						<textarea class="input-large" placeholder="文本区"></textarea>
					</div>
					<div class="control-group">
						<div data-role="BTCheck" class="BTCheck_ON">Checkbox</div><div data-role="BTCheck" class="BTCheck_ON" align="right">Checkbox</div>
					</div>
					<table>
						<tr>
							<td>
								<div class="btn-primary" data-role="BTButton">提交</div>
							</td>
							<td>
								<div data-role="BTButton">重置</div>
							</td>
						</tr>
					</table>				
				</form>
			</div>
		</div>
		<div class="footer" fixed="bottom">			
			<div class="navbar">
				<ul class="grid-d">
					<li><div data-role="BTButton" class="btn-inverse btn-active" data-icon="statics/images/icon-home.png" icon-dir="top" mouseup="false">Button1Button1</div></li>
					<li><div data-role="BTButton" class="btn-inverse" data-icon="statics/images/icon-list.png" icon-dir="top" mouseup="false">Button2</div></li>
					<li><div data-role="BTButton" class="btn-inverse" data-icon="statics/images/icon-search.png" icon-dir="top" mouseup="false">Button3</div></li>
					<li><div data-role="BTButton" class="btn-inverse" data-icon="statics/images/icon-setting.png" icon-dir="top" mouseup="false">Button4</div></li>
				</ul>
			</div>
		</div>
	</div>
</div>
</body>
</html>